<template>
    <div class="Emp">
        <el-container style="height: 900px; border: 1px solid #eee">
            <el-aside width="300px" style="background-color: rgb(238, 241, 246)">
                <div class="block">
                    <p>部门</p>
                    <el-tree
                            :data="deptList"
                            show-checkbox
                            node-key="id"
                            default-expand-all
                            :props="defaultProps"
                            :expand-on-click-node="false"
                    >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span @click="getEmps(data,culpage,pagesize)">{{ node.label }}</span>
                            <el-dropdown>
                              <el-button class="opt">操作</el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <el-button
                                            type="text"
                                            size="mini"
                                            @click="() => append(data)">
                                         添加
                                    </el-button>
                                </el-dropdown-item>
                                <el-dropdown-item >
                                    <el-button
                                            type="text"
                                            size="mini"
                                            @click="() => remove(node, data)">
                                        删除
                                     </el-button>
                                </el-dropdown-item>
                                <el-dropdown-item v-if="!data.isParent">
                                    <el-button
                                            type="text"
                                            size="mini"
                                            @click="() => addEmp(data)">
                                        添加用户
                                     </el-button>
                                </el-dropdown-item>
                              </el-dropdown-menu>
                            </el-dropdown>
                        </span>
                    </el-tree>
                </div>

            </el-aside>
            <el-main>
                <el-dialog title="userTitle" :visible.sync="dialogFormVisible" width="500px">
                    <el-form :model="emp">
                      <el-form-item label="学号" :label-width="formLabelWidth">
                        <el-input
                            placeholder="学号"
                            v-model="emp.workId"
                        >
                        </el-input>
                      </el-form-item>
                        <el-form-item label="用户头像" :label-width="formLabelWidth">
                            <el-upload
                                    class="avatar-uploader"
                                    action="api/fileInfo/uploadFile"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess">
                                <img v-if="userface" :src="userface" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="姓名" :label-width="formLabelWidth">
                            <el-input
                                    placeholder="姓名"
                                    v-model="emp.name"
                            >
                            </el-input>
                        </el-form-item>
                      <template>
                        <el-select v-model="emp.gender" placeholder="请选择">
                          <el-option
                              v-for="item in genderOpt"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                        </el-select>
                      </template>

                        <el-form-item label="籍贯" :label-width="formLabelWidth">
                            <el-input
                                    placeholder="籍贯"
                                    v-model="emp.nativePlace"
                            >
                            </el-input>
                        </el-form-item>

                        <el-form-item label="联系地址" :label-width="formLabelWidth">
                            <el-input
                                    placeholder="联系地址"
                                    v-model="emp.address"
                            >
                            </el-input>
                        </el-form-item>
                      <el-form-item label="所属专业" :label-width="formLabelWidth">
                            <el-input
                                    placeholder="所属专业"
                                    v-model="emp.specialty"
                            >
                            </el-input>
                        </el-form-item>

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="saveOrEditEmp">确 定</el-button>
                    </div>
                </el-dialog>
              <el-table :data="empData.list">
                <el-table-column  label="头像" width="140">
                  <template slot-scope="scope">
                    <el-col :span="12">
                      <div class="demo-basic--circle">
                        <div class="block"><el-avatar shape="square" :size="50" :src="scope.row.userface"></el-avatar></div>

                      </div>
                    </el-col>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="gender" label="性别" width="140">
                </el-table-column>
                <el-table-column prop="nativePlace" label="籍贯" width="140">
                </el-table-column>
                <el-table-column prop="address" label="联系地址" width="120">
                </el-table-column>
                <el-table-column prop="specialty" label="所属专业" width="140">
                </el-table-column>
                <el-table-column prop="createAt" label="日期" width="140">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="editUser(scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>

              </el-table>
              <div class="block">

                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=culpage
                    :page-sizes="[10, 50, 100, 200]"
                    :page-size=pagesize
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="empData.totalSize">
                </el-pagination>
              </div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
    import {Message} from "element-ui";
    export default {
        data(){
            return{
                deptList:[],
                defaultProps: {
                    children: 'departments',
                    label: 'name',
                    id: 'id'
                },
                genderOpt:[
                  {'value':'0','label':"男"},
                  {'value':'1','label':"女"},
                  {'value':'0','label':"不详"},

                ],
                pagesize:30,
                emp:{},
                userface:'',
                dialogFormVisible:false,
                formLabelWidth:300,
                empData:{},
            }
        },
        methods:{
            getDeptList(){
                this.getRequest('/api/tg/department/loadDeptList').then(p=>{
                    this.deptList = p.data.data
                })
            },
            //删除分组
            remove(node, data) {
                this.$confirm('是否删除', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.postRequest('api/tg/department/delDept/'+data.id).then(resp=>{
                        const parent = node.parent;
                        const children = parent.data.departments || parent.data;
                        const index = children.findIndex(d => d.id === data.id);
                        children.splice(index, 1);
                        Message.success("删除成功")
                    })
                })
            },
          //编辑用户弹出
          editUser(data){
            this.dialogFormVisible = true
            this.userface= data.userface
            this.emp=data
          },
          //删除
          handleDelete(index,data) {
            this.$confirm('是否删除', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.postRequest('/api/tg/employee/delEmp' ,{ids:[data.id]}).then(resp => {
                if (resp.data.code==='0') {
                  this.empData.list.splice(index, 1)
                  Message.success("删除成功")
                }else {
                  Message.warning(resp.data.message);
                }
              })
            })
          },
            //添加分组
            append(data) {
                this.$prompt('请输名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    const queryParam  = {name:value,parentId:data.id};
                    this.postRequestJson('api/tg/department/addDept',queryParam).then(resp=>{
                        const newChild = { id: resp.data.data.id,name:value,departments: [] };
                        if (!data.departments) {
                            this.$set(data, 'departments', []);
                        }
                        data.departments.push(newChild);
                    })
                    this.$message({
                        type: 'success',
                        message: '请输名称: ' + value
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            //添加用户
            addEmp(data){
                this.userface = ''
                this.emp={departmentId:data.id}
                this.dialogFormVisible = true
            },
          //保存修改
          saveOrEditEmp(){
            this.emp.userface = this.userface;
            this.postRequestJson("api/tg/employee/addOrEditEmp" ,this.emp).then(p=>{
              if(p.data.code==='0'){
                Message.success(p.data.message)
              }else{
                Message.warning(p.data.message)
              }
            })
          },

          //根据部门id查找用户
          getEmps(data,currentPage, pageSize) {

            const param = {id:data.id,currentPage:currentPage, pageSize:pageSize}
            this.postRequestJson('/api/tg/employee/getUsersByDeptId', param).then(resp=>{
              this.empData = resp.data.data
            })
          },
          handleAvatarSuccess(res) {
            if(res.code ==='0') {
              this.userface = res.data
              this.emp.userface = res.data
              Message.info("上传成功")
            }else {
              Message.error("上传失败")
            }

          },
          handleSizeChange(val) {
            this.pagesize = val
            const param = {id:this.departmentId}
            this.getUsers(param, this.culpage,this.pagesize)
          },
          handleCurrentChange(val) {
            this.culpage = val
            const param = {id:this.groupId}
            this.getUsers(param, this.culpage,this.pagesize)
          },
        },
        created() {
            this.getDeptList()
        },

    }
</script>
<style>
    .opt{
        border:none;
        opacity:0.5;
        color: #20a0ff;
    }

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #67C23A;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 140px;
      height: 140px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 140px;
      height: 140px;
      display: block;
    }
</style>